<template>
  <div class="w-full h-40px flex justify-between items-center">
    <!--    左侧的菜单栏控制按钮-->
    <n-button text @click="qihuanzhankai()" class="mx-2">
      <n-icon size="20">
        <LayoutSidebarLeftExpand v-if="layoutaction.zhankai"/>
        <LayoutSidebarLeftCollapse v-else/>
      </n-icon>
    </n-button>
    <!--    右侧主要信息展示区-->
    <div class="flex justify-center items-center">
      <n-icon size="20" class="mx-2  dianji" @click="showsearh">
        <SearchOutlined></SearchOutlined>
      </n-icon>
      <n-icon size="20" class="mx-2  dianji" @click="suoding">
        <LockOutlined></LockOutlined>
      </n-icon>
      <n-icon size="20" class="mx-2  dianji" @click="getfullscreen">
        <FullscreenExitOutlined v-if="isfullscreen"></FullscreenExitOutlined>
        <FullscreenOutlined v-else></FullscreenOutlined>
      </n-icon>
      <n-dropdown trigger="hover" @select="handleSelect" :options="noticeoptions">
        <n-icon size="20" class="mx-2  dianji">
          <NotificationsOutline></NotificationsOutline>
        </n-icon>
      </n-dropdown>
      <n-dropdown trigger="hover" @select="handleSelect" :options="options">
        <n-avatar
            round
            size="small"
            :src="useraction.touxiang || touxiang"
            class="mx-2  dianji"
        />
      </n-dropdown>
      <n-icon size="20" class="mx-2  dianji" @click="showdrawer">
        <SettingOutlined></SettingOutlined>
      </n-icon>
    </div>
    <n-drawer v-model:show="drawerActive" :width="502">
      <n-drawer-content title="设置">
        <n-space class="flex items-center">
          <span>上下班时间：</span>
          <n-time-picker default-formatted-value="09:00:00" v-model:value="workTime.startTime" />
          <n-time-picker default-formatted-value="18:00:00" v-model:value="workTime.endTime"/>
        </n-space>
      </n-drawer-content>
    </n-drawer>
    <search ref="searchref"></search>
  </div>
</template>

<script setup name="myheader">
import screenfull from "screenfull";
import {useRoute, useRouter} from "vue-router";
import {LayoutSidebarLeftCollapse, LayoutSidebarLeftExpand} from "@vicons/tabler"
import {useLayout} from "../../store/moduls/layout";
import {
  SearchOutlined,
  UnlockOutlined,
  LockOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  SettingOutlined
} from "@vicons/antd"
import {NotificationsOutline} from "@vicons/ionicons5"
import {useUserInfo} from "../../store/moduls/userinfo";
import useState from '../../hooks/useState'

const router = useRouter()
const route = useRoute()
const searchref = ref(null)
const layoutaction = useLayout()
const useraction = useUserInfo()
// 默认的头像
const touxiang =ref("http://101.43.194.47:9000/file/yuangong.webp")
const qihuanzhankai = () => {
  layoutaction.changezhankai()
}
// 抽屉显示隐藏
const drawerActive = useState("drawerActive",false)
const showdrawer = () => {
  drawerActive.value = !drawerActive.value
}
// 用户头像下拉菜单内容
const options = ref([
  {label: "个人主页", key: "userinfo"},
  {label: "退出登录", key: "logout"},
])
// 通知信息列表
const noticeList = ref([])
// 渲染通知下拉菜单
const renderhtml1 = () => {
  if (noticeList.value.length === 0) {
    return h("div", {class: {"w-200px h-100px juzhong1": true},}, [
      h("span", {class: {"text-gray-300 select-none": true}}, {
        default() {
          return "暂无通知"
        }
      })
    ])
  } else {
    return h("div", {class: {"w-200px h-20px juzhong1": true},}, {
      default() {
        return "有通知"
      }
    })
  }
}
// 通知的下拉菜单
const noticeoptions = ref([
  {
    key: "wuyong",
    type: "render",
    render: () => {
      return renderhtml1()
    },
  },
])
const handleSelect = (key) => {
  switch (key) {
    case "logout":
      useraction.zhuxiao()
      router.replace({name: "Login"})
      break;
  }
}
// 点击搜索图标
const showsearh = () => {
  searchref.value.init()
}
// 锁屏
const suoding = () => {
  layoutaction.changelock(true)
}
// 点击全屏
const isfullscreen = ref(false)
const getfullscreen = () => {
  screenfull.toggle();
}
const changefullscreen = () => {
  isfullscreen.value = screenfull.isFullscreen
}

// 上班时间
const workTime = useState("workTime",{startTime:null,endTime:null})

onMounted(() => {
  screenfull.on('change', changefullscreen)
})
onUnmounted(() => {
  screenfull.off('change', changefullscreen)
})
</script>

<style scoped>

</style>
